<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>北大青鸟登陆页面</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background: url(../img/reg-mobile.jpg);
			position: relative;
			position: relative;
		}
		#d1{
			width: 1000px;
			height: 500px;
			background-color: whitesmoke;
			position: absolute;
			left: 200px;
			top: 130px;
			border: 2px solid black;
		}
		#sj{
			position: absolute;
			left: 80px;
			top: 80px;
		}
		#d1 span{
			display: inline-block;
			position: absolute;
			top: -26px;
		}
		a{
			text-decoration: none;
			color: black;		
			background-color: whitesmoke;			
		}
		input{
			width: 200px;
			height: 30px;
		}
		#yx{
			display: none;
		}	
		#l_agree a{
			color: deepskyblue;
		}
		#dr{	
		    float: right;
		    border-left:1px dashed black;
		    height: 500px;
		    width: 300px;
		    padding-left: 50px;
		}
		#btn_b{
			
			width: 200px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 8px;
            margin-top: 100px;
            margin-right: 50px;
            color: #fff;
            background-color:#55abe8;
           
            
		}	
	</style>
	<script type="text/javascript" src="../jquery-1.12.4 (1).js"></script>
		<script>
			$(function(){
				$("#s").click(function(){
					$("#s").css({"background-color":"white","color":"black"});					
					$("#yx").hide();
				})				
				$("#y").click(function(){
					$("#y").css({"background-color":"white","color":"black"});			
					$("#yx").show();
				});
			$("#sjtj").submit(function(){
		    var tj=checksjh()&checkyzm()&checkpass();
		    return tj>0;
		    });
				
		    $("#sjh").blur(checksjh);
		    $("#yzm").blur(checkyzm);
		    $("#pass").blur(checkpass);
		   
		    function checksjh(){
		    	var sj=$("#sjh");
		    	var m=sj.val();
		    	if (m=="") {
		    		sj.next().html("手机号不能为空");
		    		return false;
		    	}
		    	var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
		    	if(!reg.test(m)){
		    		sj.next().html("手机号码格式不正确");
		    		return false;
		    	}
		    	sj.next().hide();
		    	sj.next().next().show();
		    	return true;
		    	
		    }
		    function checkyzm(){
		    	var yzm=$("#yzm");
		    	var y=yzm.val();
		    	if (y=="") {
		    		yzmy.next().html("验证码不能为空");
		    		return false;
		    	}
		    	var reg=;
		    	if (!regy.test(y)) {
		    		yzm.next().html("验证码错误");
		    		return false;
		    	}
		    	yzm.next().hide();
		    	yzm.next().next().show();
		    	return true;
		    	
		    }
		    function checkpass(){
		    	var pwd=$("#pass");		    	
		    	 pwd1=pwd.val();
		    	if (pwd1=="") {
		    		pwd.next().html("密码不能为空");	    		
		    		return false;
		    	}
		    	var regp=/^\w{6,16}$/;
		    	if (!regp.test(pwd1)) {
		    		pwd.next().html("输入6-16位字符或数字、字母,区分大小写");	    		
		    		return false;
		    	}
                pwd.next().hide();
                pwd.next().next().show();
		    	return true;
		    }
			});
		</script>
	
	<body>
		<div id="d1">
			<span>
			<a href="#" id="s" style="font-size: 24px; font-weight: 900;">手机注册</a>
			<a href="#" id="y" style="font-size: 24px; font-weight: 900;">邮箱注册</a>
			</span>
			<form action="#" method="post" id="sj">
			<p><input type="text" name="sjh" id="sjh" value="" placeholder="请输入您的常用手机号" original="请输入您的常用手机号"  style="color:gainsboro;border-radius:8px;"/><span id=""></span></p><br />
			<p><input type="text" name="yzm" id="yzm" value=""  placeholder="6位短信验证码" original="6位短信验证码"  style="color:gainsboro;width: 100px; border-radius:8px;"/><span id=""></span></p><br />
			<p><input type="text" name="pass" id="pass" value="" placeholder="请输入密码" original="请输入密码"  style="color:gainsboro;border-radius:8px;" /><span id=""></span></p><br />
		 	<input type="checkbox" checked="checked" style="width: 15px; height: 15px;" /><label id="l_agree">同意<a href="#">用户服务条款</a></label><br />
			<input type="submit" id="sjtj" style="width: 180px;height: 40px; background-color: cornflowerblue; border-radius: 8px; " value="注册"/>
		</form>
			<form action="#" method="post" id="yx">
			<p><input type="text" name="emal" id="name" value="" c /><span id=""></span></p><br />
			<p><input type="text" name="pass" id="pass" value="" /><span id=""></span></p><br />
			<p><input type="text" name="rpass" id="xs" value="" /><span id="x"></span></p><br />
			<input type="submit" style="width: 180px;height: 40px;" value="注册"/>
		</form>
		<div id="dr">
		<form method="post" action="post">
		<input type="button" id="btn_b"value="已有账号，马上登录" />
		</form>	
		</div>
		</div>
		
	</body>
</html>
